<!-- Options page.

     Copyright (C) 2010-2012.

     This file is part of Redirector.

     Redirector is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
     the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.

     Redirector is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     GNU General Public License for more details.

     You should have received a copy of the GNU General Public License
     along with Redirector.  If not, see <http://www.gnu.org/licenses/>.

     From Cyril Feng. -->

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;
                                             charset=utf-8">
    <title i18n="PAGE_TITLE"></title>
    <script src="/js/common.js" type="text/javascript"></script>
    <script src="/js/prompt.js" type="text/javascript"></script>
    <script src="/js/pref.js" type="text/javascript"></script>
    <script src="/js/rule.js" type="text/javascript"></script>
    <script src="/js/debugger.js" type="text/javascript"></script>
    <script src="/js/options.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/options.css" type="text/css">
  </head>

  <body>
    <!-- Navigation bar -->
    <div id="navBar">
      <h1>Redirector</h1>

      <ul id="navTags">
        <li id="prefTag">
          <a href="#pref" i18n="PREF_TITLE"></a>
        </li>
        <li id="ruleMgrTag">
          <a href="#ruleMgr" i18n="RULEMGR_TITLE"></a>
        </li>
        <li id="dbgTag">
          <a href="#dbg" i18n="DBG_TITLE"></a>
        </li>
        <li id="docTag">
          <a href="#doc" i18n="DOC_TITLE"></a>
        </li>
      </ul>
    </div>

    <!-- The main display part -->
    <div id="main-container">
      <div id="main">
        <!-- Page for Preferences -->
        <div id="pref">
          <h1 i18n="PREF_TITLE"></h1>

          <!-- Proto settings -->
          <h3 i18n="PROTO_TITLE"></h3>
          <section>
            <details>
              <summary>
                <input type="checkbox" id="pref_proto_all" class="pref-protos" />
                <label i18n="PROTO_ALL" for="pref_proto_all">
                </label><br />
              </summary>

              <section>
                <input type="checkbox" id="pref_proto_http" class="pref-protos" />
                <label for="pref_proto_http">HTTP://</label><br />
                <input type="checkbox" id="pref_proto_https" class="pref-protos" />
                <label for="pref_proto_https">HTTPS://</label><br />
                <input type="checkbox" id="pref_proto_ftp" class="pref-protos" />
                <label for="pref_proto_ftp">FTP://</label><br />
                <input type="checkbox" id="pref_proto_file" class="pref-protos" />
                <label for="pref_proto_file">FILE://</label><br />
              </section>
            </details>
          </section>

          <!-- Context menu settings -->
          <h3 i18n="CONTEXT_TITLE"></h3>
          <section>
            <input type="checkbox" id="pref_context_all" />
            <label i18n="CONTEXT_ALL" for="pref_context_all">
            </label><br />
            <input type="checkbox" id="pref_context_link" />
            <label i18n="CONTEXT_LINK" for="pref_context_link">
            </label><br />
            <input type="checkbox" id="pref_context_page" />
            <label i18n="CONTEXT_PAGE" for="pref_context_page">
            </label><br />
          </section>

          <!-- Input prompt settings -->
          <h3 i18n="PROMPT"></h3>
          <section>
            <input type="checkbox" id="pref_prompt" />
            <label i18n="PROMPT_CHKBOX" for="pref_prompt"></label>
          </section>

          <!-- Icon notification settings -->
          <h3 i18n="PAGEACTION_TITLE"></h3>
          <section>
            <input type="checkbox" id="pref_pageAction" />
            <label i18n="PAGEACTION_DISABLE" for="pref_pageAction">
            </label>
          </section>
        </div>

        <!-- Page for rules -->
        <div id="ruleMgr" class="mainview">
          <div id="ruleContextMenu">
            <ul>
              <li id="ruleMgr-add" i18n="BTN_NEW"></li>
              <li id="ruleMgr-edit" i18n="BTN_EDIT"></li>
              <li id="ruleMgr-del" i18n="BTN_DEL"></li>
              <li id="ruleMgr-move_up" i18n="BTN_UP"></li>
              <li id="ruleMgr-move_down" i18n="BTN_DOWN"></li>
            </ul>
          </div>

          <h1 i18n="RULEMGR_TITLE"></h1>

          <!-- Rules list -->
          <h3 i18n="LBL_TITLE"></h3>

          <!-- Backup rule list -->
          <section>
            <details class="scroll-area">
              <summary i18n="RULEMGR_BAK_TITLE"></summary>

              <p>
                <input type="button" id="ruleList-bak"
                       i18n="value:BTN_BAK;title:BTN_BAK_TITLE" />
              </p><p>
                <input type="button" id="ruleList-restore"
                       i18n="value:BTN_RESTORE;title:BTN_RESTORE_TITLE" />
                <input type="file" id="ruleEdit_restoreFile" accept="text/*" />
              </p><p>
                <input type="button" id="ruleList-export"
                       i18n="value:BTN_EXPORT;title:BTN_EXPORT_TITLE" />
              </p><p>
                <input type="button" id="ruleList-import"
                       i18n="value:BTN_IMPORT;title:BTN_IMPORT_TITLE" />
                <input type="file" id="ruleEdit_appendFile" accept="text/*" />
              </p>
              <!-- Remote rules -->
              <details class="scroll-area">
                <summary id="ruleList-remote-title"></summary>

                <pre i18n="RULELIST_REMOTE_WARN"></pre>
                <input type="url" id="ruleList-remote-url" />
                <div class="action-area">
                  <input type="button" id="ruleList-remote-update"
                         i18n="value:BTN_UPDATE" />
                  <input type="button" id="ruleList-remote-del"
                         i18n="value:BTN_DEL" />
                </div>
              </details>
            </details>
          </section>

          <section>
            <pre i18n="RULELIST_USAGE"></pre>
            <table id="ruleListTable" i18n="title:RULELIST_USAGE">
              <colgroup>
                <col width="4%">
                <col width="24%" span="4">
              </colgroup>
              <tr>
                <th id="ruleListTable-new" i18n="title:BTN_NEW">&#43;</th>
                <th i18n="LBL_NAME"></th>
                <th i18n="LBL_MATCH"></th>
                <th i18n="LBL_SUB"></th>
                <th i18n="LBL_REPL"></th>
              </tr>
            </table>
          </section>
        </div>

        <!-- Page for debugger -->
        <div id="dbg" class="mainview">
          <h1 i18n="DBG_TITLE"></h1>

          <form class="form-nosubmit">
            <input type="url" id="dbg_url"
                   class="input-text"
                   i18n="placeholder:PH_DEBUG_URL" required />
            <input type="checkbox" id="dbg-chkbox-1" />
            <label i18n="DBG_QUIET" for="dbg-chkbox-1"></label>
            <input type="checkbox" id="dbg-chkbox-2" checked />
            <label i18n="DBG_TRACK_REDIR" for="dbg-chkbox-2"></label>
            <input type="checkbox" id="dbg-chkbox-3" checked />
            <label i18n="DBG_TRACK_REQHDR" for="dbg-chkbox-3"></label>
            <input type="checkbox" id="dbg-chkbox-4" checked />
            <label i18n="DBG_TRACK_RESPHDR" for="dbg-chkbox-4"></label>
            <input type="checkbox" id="dbg-chkbox-5" />
            <label i18n="DBG_TEST_SPEED" for="dbg-chkbox-5"></label>

            <div class="action-area">
              <input type="submit" id="dbg_start" i18n="value:BTN_DBG_START" />
              <input type="button" id="dbg_stop" hidden="true"
                     i18n="value:BTN_DBG_STOP" />
              <input type="button" id="dbg_unfold" hidden="true"
                     i18n="value:BTN_DBG_UNFOLD" />
              <input type="button" id="dbg_fold" hidden="true"
                     i18n="value:BTN_DBG_FOLD" />
              <input type="button" id="dbg_clear" i18n="value:BTN_DBG_CLEAR" />
            </div>
          </form>

          <div id="dbg_info">
          </div>

          <details class="scroll-area">
            <summary i18n="DBG_INFO_EXPORT"></summary>

            <p>
              <input type="button" id="dbg-export"
                     i18n="value:BTN_EXPORT;title:BTN_DBG_EXPORT_TITLE" />
            </p><p>
              <input type="button" id="dbg-import"
                     i18n="value:BTN_IMPORT;title:BTN_DBG_IMPORT_TITLE" />
              <input type="file" id="dbg_importFile"
                     accept="text/*" />
            </p>
          </details>
        </div>

        <!-- Page for docs -->
        <div id="doc" class="mainview">
          <h1 i18n="DOC_TITLE"></h1>

          <section>
            <h3>
              <a href="/html/en.html" target="_blank">
                Redirector Guide
              </a>
            </h3>
            <h3>
              <a href="/html/zh_CN.html" target="_blank">
                Redirector指南
              </a>
            </h3>
            <h3>
              <a href="https://chrome.google.com/webstore/support/lacckjdlmkdhcacjdodpjokfobckjclh"
                 target="_blank" i18n="DOC_SUPPORT"></a>
            </h3>
          </section>
        </div>

        <div id="overlay">
          <!-- Rule Editor -->
          <div id="layerFront">
            <section>
              <h1 i18n="RULE_EDITOR"></h1>
            </section>
            <!-- Main form -->
            <form id="ruleEdit" class="form-nosubmit" autocomplete="off">
              <section id="ruleEdit_name">
                <!-- Rule name -->
                <h3 i18n="LBL_NAME"></h3>
                <br />
                <input id="ruleEdit_namestr" i18n="placeholder:PH_NAME"
                       required />
              </section>

              <section id="ruleEdit_match">
                <!-- Match pattern -->
                <h3 i18n="LBL_MATCH"></h3>
                <select id="ruleEdit_matchtype">
                  <option selected="selected" i18n="TYPE_REGEXP">
                  </option>
                  <option i18n="TYPE_GLOB;title:TYPE_GLOB_DEPRECATED"></option>
                  <option i18n="TYPE_MANUAL"></option>
                  <option i18n="TYPE_GLOB_SMART"></option>
                </select>
                <input type="checkbox" id="ruleEdit_matchcase" />
                <label i18n="LBL_IGNCASE" for="ruleEdit_matchcase">
                </label>

                <input type="button" id="ruleEdit_matchContent"
                       i18n="value:CONTENT_FILTER" />
                <div id="ruleEdit_matchContentType">
                  <ul>
                    <li>
                      <input type="checkbox" id="rmct1" checked />
                      <label for="rmct1" i18n="CONTENT_ALL_TYPE">All Type</label>
                    </li><li>
                      <input type="checkbox" id="rmct2" class="rmcts" checked />
                      <label for="rmct2" i18n="CONTENT_MAIN_FRAME"></label>
                    </li><li>
                      <input type="checkbox" id="rmct3" class="rmcts" checked />
                      <label for="rmct3" i18n="CONTENT_SUB_FRAME"></label>
                    </li><li>
                      <input type="checkbox" id="rmct4" class="rmcts" checked />
                      <label for="rmct4">CSS</label>
                    </li><li>
                      <input type="checkbox" id="rmct5" class="rmcts" checked />
                      <label for="rmct5" i18n="CONTENT_SCRIPT"></label>
                    </li><li>
                      <input type="checkbox" id="rmct6" class="rmcts" checked />
                      <label for="rmct6" i18n="CONTENT_IMAGE"></label>
                    </li><li>
                      <input type="checkbox" id="rmct7" class="rmcts" checked />
                      <label for="rmct7" i18n="CONTENT_OBJECT"></label>
                    </li><li>
                      <input type="checkbox" id="rmct8" class="rmcts" checked />
                      <label for="rmct8">XHR</label>
                    </li><li>
                      <input type="checkbox" id="rmct9" class="rmcts" checked />
                      <label for="rmct9" i18n="CONTENT_OTHER"></label>
                    </li>
                  </ul>
                </div>
                <br />

                <input id="ruleEdit_matchstr"
                       i18n="placeholder:PH_MATCH" required />
              </section>

              <section id="ruleEdit_sub">
                <!-- Substitution -->
                <h3 i18n="LBL_SUB"></h3>
                <select id="ruleEdit_subtype">
                  <option selected="selected" i18n="TYPE_REGEXP">
                  </option>
                  <option i18n="TYPE_GLOB"></option>
                  <option i18n="TYPE_BLOCK"></option>
                  <option i18n="TYPE_REQ_HDR"></option>
                  <option i18n="TYPE_RESP_HDR"></option>
                </select>
                <input type="checkbox" id="ruleEdit_subcase" />
                <label i18n="LBL_IGNCASE" for="ruleEdit_subcase">
                </label>
                <input type="checkbox" id="ruleEdit_subglob" />
                <label i18n="LBL_SUBGLOB" for="ruleEdit_subglob">
                </label>
                <br />
                <input id="ruleEdit_substr"
                       i18n="placeholder:PH_SUB" required />
              </section>

              <section id="ruleEdit_repl">
                <!-- Replacement -->
                <h3 i18n="LBL_REPL"></h3>
                <input type="checkbox" id="ruleEdit_replDecode" />
                <label i18n="LBL_REPLDECODE" for="ruleEdit_replDecode">
                </label>
                <br />
                <input id="ruleEdit_replstr" i18n="placeholder:PH_REPL" />
              </section>

              <!-- Save/Cancel buttons -->
              <section>
                <div class="action-area">
                  <input type="submit" id="ruleEdit-save" i18n="value:BTN_SAVE" />
                  <input type="button" id="ruleEdit-discard" i18n="value:BTN_CANCEL" />
                </div>
              </section>
            </form>

            <hr />

            <!-- Test form -->
            <form class="scroll-area form-nosubmit" autocomplete="off">
              <section>
                <details id="ruleEdit_test">
                  <summary i18n="LBL_TEST"></summary>

                  <input type="url" id="ruleEdit_teststr"
                         class="input-text"
                         i18n="placeholder:PH_TEST_URL" required />
                  <div class="action-area">
                    <input type="button" id="ruleEdit-test" i18n="value:BTN_TEST" />
                  </div>
                </details>
              </section>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- Notification layer -->
    <div id="layerNotif">
      <div  class="div-center">
        <div id="layerNotif_disp"></div>
      </div>
    </div>
  </body>
</html>
